<template>
  <div class="container">
    <!-- tool start -->
    <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('m.type')+$t('m.name')">
            <el-input maxlength="20" show-word-limit v-model.trim="formInline.containertypename"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.state')">
            <el-select v-model="formInline.state">
              <el-option
                v-for="(item,index) in stateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          <el-button type="primary" @click="handleContainerType()" v-if="hasPermission('add')">{{$t('m.add')}}</el-button>
          <el-button type="primary" @click="modefyState" v-if="hasPermission('editState')">{{$t('m.editState')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->

    <!-- table数据展示 start -->
    <el-row class="table-wrap">
      <el-col :span="24">
        <el-table
          ref="table"
          stripe
          empty-text
          fit
          v-loading="tableLoading"
          :data="tableData"
          :row-style="tableRowStyle"
          :row-class-name="tableRowClassName"
          @row-click="rowClick"
          @selection-change="handleMultiSelectionChange">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="containertypename" :label="$t('m.container.containertypename')"></el-table-column>
          <el-table-column align="center" prop="containertypecode" :label="$t('m.container.containertypecode')"></el-table-column>
          <el-table-column align="center" :label="$t('m.state')">
            <template slot-scope="scope">{{scope.row.state|stateFilter}}</template>
          </el-table-column>
          <el-table-column align="center" prop="remark" :label="$t('m.remark')" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="creator" :label="$t('m.creator')" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="createdate" :label="$t('m.createdate')">
            <template slot-scope="scope">{{scope.row.createdate|dateFilter}}</template>
          </el-table-column>
          <el-table-column align="center" prop="creator" :label="$t('m.modifier')" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop="createdate" :label="$t('m.modifydate')">
            <template slot-scope="scope">{{scope.row.createdate|dateFilter}}</template>
          </el-table-column>
          <el-table-column align="center" :label="$t('m.operation')">
            <template slot-scope="scope">
              <template v-if="scope.row.state===1">
                <el-button type="text" @click.stop="handleContainerType(scope.row.containertypeid)">{{$t('m.edit')}}</el-button>
              </template>
              <!-- <el-button type="text" style="color:#f56c6c" @click.stop="handleDelete(scope.row.containertypeid)">{{$t('m.delete')}}</el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          layout="sizes, prev, pager, next, jumper"
          :page-sizes="pageSizeList"
          :page-size="rowSize"
          :current-page="page"
          :total="totalRows"
          @current-change="currentChange"
          @size-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- table数据展示 end -->

    <!-- 新增 or 编辑 容器类型 start -->
    <handleContainerTypePopup
      v-if="handleContainerTypePopupVisible"
      :dialogVisible="handleContainerTypePopupVisible"
      :detail="containerTypeDetail"
      @close="handleContainerTypePopupVisible=false"
      @save="containerTypeSave">
    </handleContainerTypePopup>
    <!-- 新增 or 编辑 容器类型 end -->

    <!-- 变更容器状态 start -->
    <typeSetting
      v-if="typeSettingVisible"
      :dialogVisible="typeSettingVisible"
      :options="stateOptions.slice(1)"
      @close="typeSettingVisible=false"
      @save="handleTypeSetting">
    </typeSetting>
    <!-- 变更容器状态 end -->
  </div>
</template>
<script>
let __this
export default {
  name:'containerTypeSetting',
  data(){
    return {
      formInline:{
        containertypename:'', // 容器类型名称
        state:'' // 容器类型状态
      },
      stateOptions:[ // 容器状态
        {label:this.$t('m.all'), value:''},
        {label:this.$t('m.stop'), value:0},
        {label:this.$t('m.start'), value:1}
      ],
      handleContainerTypePopupVisible:false, // 控制[新增 or 编辑]容器类型dialog显示隐藏
      containerTypeDetail:'',

      typeSettingVisible:false, // 控制变更容器状态dialog显示隐藏

      tableData:[]
    }
  },
  beforeCreate(){
    __this = this
  },
  activated(){
    this.getData()
  },
  components:{
    handleContainerTypePopup:()=>import('@/components/containerTypeSetting/handle-container-type-popup'), // 新增 or 编辑 容器类型组件
    typeSetting:()=>import('@/components/containerTypeSetting/type-setting') // 变更容器状态
  },
  filters:{
    stateFilter(value){
      return  __this.stateOptions.find((item)=>{
        return item.value === value
      }).label
    }
  },
  methods:{
    search(){
      this.page = 1
      this.getData()
    },
    getData(){
      let options = {
        method:'get',
        url:`/containertype/page`,
        params:Object.assign({}, this.formInline, {page:this.page,rows:this.rowSize})
      }
      this.tableLoading = true
      this.$axios(options).then(({ data }) => {
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
        this.page = data.current
        if (!this.tableData.length)
          return this.callbackMessage(this.$t('m.nodata'))
      })
    },
    // 根据容器类型id获取data
    getContainerTypeDetail(id){
      let options = {
        method:'get',
        url:`/containertype/${id}`
      }
      this.$axios(options).then(({ data }) => {
        this.containerTypeDetail = data
        this.handleContainerTypePopupVisible = true
      })
    },
    // 新增 or 编辑 组件
    handleContainerType(id){
      if(id){ // 编辑
        this.getContainerTypeDetail(id)
      } else { // 新增
        this.containerTypeDetail = ''
        this.handleContainerTypePopupVisible = true
      }
    },
    // 表格-删除(好像没有删除功能)
    // handleDelete(id){
    //   this.$confirm('是否删除?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     let options = {
    //       method: 'delete',
    //       url: `/containertype/${id}`,
    //     };
    //     this.$axios(options).then(({ message }) => {
    //       return this.callbackMessage(message)
    //     })
    //   }).catch(() => {
    //     this.callbackMessage('已取消删除','info')
    //   });
    // },
    // 保存新增or编辑的数据
    containerTypeSave(formData){
      delete formData.warehousename
      formData.warehouseid = this.$store.state.basicInfo.warehouseInfo.id
      let options = !this.containerTypeDetail?
        {method:'post',url:`/containertype/add`,data:formData}:{method:'put',url:`/containertype/${this.containerTypeDetail.containertypeid}`,data:formData}
      this.$axios(options).then(({ message }) => {
        this.callbackMessage(message,'success')
        this.handleContainerTypePopupVisible = false
        this.getData()
      })
    },
    // 修改状态
    modefyState(){
      if(!this.tableRowSelected.length) return this.callbackMessage(this.$t('m.container.containertypeValidate'))
      this.typeSettingVisible = true
    },
    handleTypeSetting(state){
      let ids = this.tableRowSelected.map((item)=> item.containertypeid)
      let options = {
        method:'put',
        url:`/containertype/state`,
        data:{state,ids}
      }
      this.$axios(options).then(({ message }) => {
        this.callbackMessage(message,'success')
        this.typeSettingVisible = false
        this.getData()
      })
    }
  },
  beforeRouteLeave(to, form, next){
    this.handleContainerTypePopupVisible=false
    this.typeSettingVisible=false
    next()
  }
}
</script>
<style lang="scss" scoped>
.el-select{width: 100%;}
</style>